<template>
  <div class="main_bac">
   <!-- 头部 -->
   <div class="main_header">
  <el-breadcrumb separator="/">
   <el-breadcrumb-item>首页</el-breadcrumb-item>
   <el-breadcrumb-item>年度协议管理</el-breadcrumb-item>
   <el-breadcrumb-item>二级商协议</el-breadcrumb-item>
   <el-breadcrumb-item>新增二级商协议</el-breadcrumb-item>
</el-breadcrumb>
  <div>新增二级商协议</div>
   </div>
   <!-- 头部以下的整个 -->
   <div class="agreement_bac">
   <!-- 1协议主体 -->
   <div class="agreement_main">
    <div class="agreement_number">1</div>
    <span class="agreement_text">协议主体</span>
   </div>
   <!-- 协议主体表单部分 -->
   <div class="agreement_form">
     <el-form :inline="true"    size="mini" :model="ruleForm" :rules="rules">
        <!-- 第一行 -->
        <el-row>
    <el-col :span="12">
  <el-form-item label="协议客户:" prop="name">
    <el-input placeholder="选择客户" style="width:120px;" v-model="ruleForm.name"></el-input>
    上海正也医药有限公司
  </el-form-item>
   </el-col>
   <el-col :span="10">
  <el-form-item label="协议状态:">
    <el-select  placeholder="正常" v-model="selectForm" style="width:220px;">
    </el-select>
  </el-form-item>
  </el-col>
        </el-row>
        <!-- 第二行 -->
         <el-row>
    <el-col :span="12">
  <el-form-item label="购进指标:">
  <el-select  placeholder="金额" v-model="selectForm" style="width:120px;"></el-select>
    <el-input placeholder="输入金额/数量" style="width:320px; margin-left:10px" disabled></el-input>
  </el-form-item>
   </el-col>
   <el-col :span="12">
  <el-form-item label="纯销指标:">
    <el-input placeholder="金额" style="width:120px;"></el-input>
    <el-input placeholder="输入金额/数量" style="width:320px; margin-left:10px" disabled></el-input>
  </el-form-item>
  </el-col>
        </el-row>
        <!-- 第三行 -->
         <el-row>
    <el-col :span="12">
  <el-form-item label="销售区域:">
    <el-input placeholder="选择区域" style="width:120px; margin-right:10px"></el-input>
   <el-tag closable color='' hit size='medium'>全国</el-tag>
  </el-form-item>
   </el-col>
   <el-col :span="10">
  <el-form-item label="签订时间:">
       <!-- <el-time-picker placeholder="选择时间" v-model="data1"  style="width: 100%;"></el-time-picker> -->
        <el-date-picker
        v-model="data1"
      type="datetime"
      placeholder="选择日期时间"
      default-time="12:00:00">
    </el-date-picker>
  </el-form-item>
  </el-col>
        </el-row>
        <!-- 第四行 -->
       <el-row>
  <el-form-item label="购进渠道:">
    <el-select  placeholder="指定渠道" v-model="selectForm" style="width:150px;"></el-select>
    <el-input placeholder="请选择渠道" style="width:140px; margin-left:10px" ></el-input>
  </el-form-item>
        </el-row>
</el-form>
   <!-- 协议主体的table表格部分 -->
    <el-table
    :header-cell-style="rowClass"
      size='mini'
      :data="tableData"
      style="margin-left:100px;width:90%;">
      <el-table-column
        prop="date"
        label="指定渠道编码"
        min-width='280'>
      </el-table-column>
      <el-table-column
        prop="name"
        label="指定渠道名称"
        width="480">
      </el-table-column>
      <el-table-column
        prop="address"
        label="所在省"
        min-width='280'
        >
      </el-table-column>
    </el-table>
   </div>
   <!-- 2产品政策 -->
      <div class="product_num">
        <!-- 数字部分 -->
        <div class="product_main">
    <div class="agreement_number">2</div>
    <span class="agreement_text">产品政策</span>
      </div>
      <!-- 产品政策下面 -->
      <div class="product_bottom">
         <el-button type="primary" size="mini" style="margin-right:10px;">添加产品</el-button>
         <span class="product_price_left">购进总指标（万元）:</span>
         <span class="product_price_right">￥152.65</span>
         <span class="product_price_left">指标按季度分解（万元）:</span>
         <span class="product_price_right">【Q1】￥12.5,【Q2】￥12.5,【Q3】￥12.5,【Q4】￥12.5</span>
         <span class="product_price_left">纯销总指标（万元）:</span>
         <span class="product_price_right">￥152.65</span>
      </div>
   </div>
   <!-- 产品政策表单部分 -->
   <div class="product_form">
    <!-- 上面 -->
   <div class="product_top">
    <el-form :inline="true"  class="demo-form-inline"  size="mini">
  <el-form-item label="产品:" >
    <el-input  placeholder="选择产品" style="width:120px;"></el-input>
    <span class="product_top_text">美复胶丸 24粒/盒</span>
  </el-form-item>
  <el-form-item label="协议效期:">
  <div class="block">
    <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="~"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
  </div>
  </el-form-item>
  <el-form-item style=" float: right;">
     <el-button  size="mini" style="color:orange"  >删除</el-button>
  </el-form-item>
    </el-form>
   </div>
    <!-- 下面 -->
    <div class="product_bottom_out">
      <div class="product_bottom">
        <div class="product_bottom_price">
          <span class="product_bottom_price_info">协议价(元)</span>
          <span class="product_bottom_price_info" style="margin-right:70px">票折(元)</span>
          <span class="product_bottom_price_info">购进指标量(大单位)</span>
          <span class="product_bottom_price_info" style="margin-right:40px">购进指标量(小单位)</span>
          <span class="product_bottom_price_info">购进金额(万元)</span>
          <span class="product_bottom_price_info">纯销指标量(小单位)</span>
          <span class="product_bottom_price_info">纯销指金额(万元)</span>
        </div>
        <!-- 输入框 -->
        <div>
        <el-form :inline="true"   size="mini">
            <el-form-item style="margin-right:12px;">
       <el-input placeholder="请输入" style="width:120px;  margin-left:10px;" size="mini" ></el-input>
        </el-form-item>
            <el-form-item style="margin-right:12px;">
       <el-input placeholder="请输入" style=" width:120px; margin-left:10px;" size="mini" ></el-input>
        </el-form-item>
                   <el-form-item style="margin-right:32px;">
       <el-input placeholder="请输入" style="width:120px; margin-left:10px;" size="mini" ></el-input>
        </el-form-item>
                   <el-form-item style="margin-right:40px;">
       <el-input placeholder="请输入" style="width:120px; margin-left:10px;" size="mini" ></el-input>
        </el-form-item>
                   <el-form-item style="margin-right:32px;">
       <el-input placeholder="请输入" style="width:120px; margin-left:10px;" size="mini" ></el-input>
        </el-form-item>
                   <el-form-item style="margin-right:65px;">
       <el-input placeholder="请输入" style="width:120px; margin-left:10px;" size="mini" ></el-input>
        </el-form-item>
                   <el-form-item>
       <el-input placeholder="请输入" style="width:120px; margin-left:10px;" size="mini" ></el-input>
        </el-form-item>
        </el-form>
        </div>
      </div>
              <!--  -->
      <div class="product_bottom">
          <div class="product_bottom_price">
          <span class="product_bottom_price_info" style="margin-right:70px">分销奖励</span>
          <span class="product_bottom_price_info" style="margin-right:80px">费用科目</span>
          <span class="product_bottom_price_info" style="margin-right:80px">零售配送</span>
          <span class="product_bottom_price_info" style="margin-right:90px">费用科目</span>
          <span class="product_bottom_price_info" style="margin-right:60px">医疗配送商</span>
          <span class="product_bottom_price_info" style="margin-right:80px">费用科目</span>
          <span class="product_bottom_price_info" style="margin-right:80px">自定义7</span>
          <span class="product_bottom_price_info">自定义8</span>
        </div>
        <!-- 输入框 -->
        <div>
        <el-form :inline="true"   size="mini">
            <el-form-item style="margin-right:12px;">
       <el-input placeholder="请输入" style="width:120px;  margin-left:10px;" size="mini" ></el-input>
        </el-form-item>
            <el-form-item style="margin-right:12px;">
       <el-input placeholder="请输入" style=" width:120px; margin-left:10px;" size="mini" ></el-input>
        </el-form-item>
                   <el-form-item style="margin-right:15px;">
       <el-input placeholder="请输入" style="width:120px; margin-left:10px;" size="mini" ></el-input>
        </el-form-item>
                   <el-form-item style="margin-right:24px;">
       <el-input placeholder="请输入" style="width:120px; margin-left:10px;" size="mini" ></el-input>
        </el-form-item>
                   <el-form-item style="margin-right:12px;">
       <el-input placeholder="请输入" style="width:120px; margin-left:10px;" size="mini" ></el-input>
        </el-form-item>
                   <el-form-item style="margin-right:12px;">
       <el-input placeholder="请输入" style="width:120px; margin-left:10px;" size="mini" ></el-input>
        </el-form-item>
                   <el-form-item style="margin-right:10px">
       <el-input placeholder="请输入" style="width:120px; margin-left:10px;" size="mini" ></el-input>
        </el-form-item>
                     <el-form-item>
       <el-input placeholder="请输入" style="width:120px; margin-left:10px;" size="mini" ></el-input>
        </el-form-item>
        </el-form>
        </div>
      </div>
    </div>
   </div>
   <!-- 3补充协议 -->
   <div class="replenish">
   <div class="replenish_num">
    <div class="agreement_number">2</div>
    <span class="agreement_text">产品政策</span>
    </div>
    <!-- 按钮 -->
   </div>
   <!-- 表单部分 -->
    <div class="replenish_form">
      <div class="replenish_form_buttonAdd">
        <el-button type="primary" size="mini">新增</el-button>
      </div>
       <div class="replenish_form_buttonDel">
        <el-button  size="mini" style="color:orange">删除</el-button>
      </div>
       <el-tabs v-model="activeName" type="card" >
    <el-tab-pane label="用户管理" name="first">用户管理:</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理:</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理:</el-tab-pane>
  </el-tabs>
  <div class="replenish_form_bottom">
    <div ></div>
    <textarea name="" id="" cols="30" rows="10" class="replenish_form_input"></textarea>
  </div>
    </div>

   </div>
   <div class="sav_button">
    <el-button type="primary" size="mini">保存</el-button>
   </div>
  </div>
</template>
<script>
export default {
  name: 'MainIndex',
  data () {
    return {
      ruleForm: {
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入客户名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      selectForm: '',
      data1: '2020-02-01',
      value1: '2020-02-01',
      activeName: 'first',
      tableData: [{
        date: 'BJ000090',
        name: '宁波九州通药业有限公司',
        address: '浙江省'
      }, {
        date: 'BJ000192',
        name: '国药控股精华有限公司',
        address: '浙江省'
      }, {
        date: 'BJ000283',
        name: '老百姓药业有限公司',
        address: '浙江省'
      }]
    }
  },
  methods: {
    rowClass ({ row, rowIndex }) {
      return 'background:#f8f8f8'
    }
  }
}
</script>
<style lang="scss" scoped>
.main_bac{
    background: #f8f8f8;
    // height: 100vh;
    // 头部
    .main_header{
        background: #ffffff;
        height: 40px;
        padding: 6px 10px 0;
        .el-breadcrumb{
      font-size: 6px;
      color: #9b9b9b;
      margin-bottom: 10px;
        }
    }
      //  数字
        .agreement_number{
            background: #4e8bff;
            border-radius: 50%;
            width: 10px;
            height: 10px;
            text-align: center;
            line-height: 10px;
            color: #fff;
            margin-right: 4px;
        }
        .agreement_text{
            font-weight: 700;
        }
        // 协议主体
    .agreement_bac{
        padding: 0 10px;
        // 协议主体数字
     .agreement_main{
        height: 35px;
        // background: skyblue;
        display: flex;
        align-items: center;
        justify-content: center;
    }
        // 协议主体表单部分
        .agreement_form{
            background: #fff;
            // height: 300px;
            padding: 10px 20px ;
        }
    }
    // 产品政策
    .product_num{
      margin-bottom: 10px;
   .product_main{
        // height: 65px;
        // background: skyblue;
        display: flex;
        margin-top: 10px;
        justify-content: center;
   }
    .product_price_left{
      color: #666666;
      font-size: 9px;

    }
    .product_price_right{
      font-size: 9px;
      color: #666666;
      margin-right: 10px;
    }
    }
    // 产品政策表单部分
    .product_form{
    //  background: skyblue;
    //  height: 400px;
     .product_top{
      background: #fff;
      // height: 30px;
      padding: 0 10px 0px 15px;
      margin-bottom: 2px;
      .product_top_text{
        font-size: 10px;
        color: #5a94ff;
        margin-left: 6px;
        margin-right: 36px;
      }
      .el-form-item--mini.el-form-item{
        margin-bottom: 11px;
      }
     }
    //  产品政策表单部分下面
     .product_bottom_out{
      background: #fff;
      // background: skyblue;
      padding: 10px;

     .product_bottom{
      // height: 70px;
      background: #ffffff;
      // background: green;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      .product_bottom_price{
       background: #f8f8f8;
      //  height: 30px;
       padding-left: 10px;
       border-bottom: 1px solid #ccc;
       margin-bottom: 6px;
       .product_bottom_price_info{
        line-height: 30px;
        margin-right: 35px;
        color: #666666;
       }
      }
     }
     }

    }
    // 补充协议
    .replenish{
     height: 20px;
    // 补充协议数字
    .replenish_num{
         display: flex;
        margin-top: 10px;
        justify-content: center;
    }
    }
    // 表单
    .replenish_form{
      position: relative;
    //  height: 200px;
     width: 100%;
     background: #fff;
    .el-tab-pane{
      padding-left: 10px;
      margin-bottom: 10px;
    }
    .replenish_form_bottom{
      // height: 200px;
      // background: skyblue;
      padding: 0 10px 10px;
      margin-bottom: 20px;
      .replenish_form_input{
        border: 1px solid #ccc;
        height: 100%;
        width: 100%;
        background: #f8f8f8;
      }
    }
    .replenish_form_buttonAdd{
      position: absolute;
      top: 6px;
      right: 10px;
    }
    .replenish_form_buttonDel{
     position: absolute;
      top: 48px;
      right: 10px;
    }
    }
    // 底部
    .sav_button{
      background: #fff;
      padding: 10px 0 20px 10px;
    }
}

</style>
